<template>
    <view class="content" v-if="isShow">
        <view class="topx">
            <u-navbar back-icon-color="#000000" :border-bottom="false" title=" " :background="background"></u-navbar>
            <view class="bannerx">
                <u-swiper :list="list" :height="750" mode="number" indicator-pos="bottomRight"></u-swiper>
            </view>
        </view>
        <view class="moneyzx">￥<text class="nums">{{data.sale_price}}</text></view>
        <view class="goods_name">{{data.goods_name}}</view>
        <view class="okxo">
            <view class="lexd">销量：{{ data.total_sale_nums > 9999 ? parseInt(data.total_sale_nums / 10000) +'w+' : data.total_sale_nums }}</view>
            <view class="collect" @click.stop="doCollct">
				<!-- 0-未收藏 大于0已收藏 -->
                <u-icon class="czs" name="star" :color="data.is_collect > 0 ? '#f62a2a' : '#a3a3a3'" size="34"></u-icon>
                <text v-if="data.is_collect > 0" class="clt">已收藏</text>
                <text v-else class="nor">收藏</text>
            </view>
        </view>
        <view style="height:20rpx;background: #f5f5f5;"></view>
        
        <template v-if="data.evaluates_list && data.evaluates_list.length > 0">
            <view class="oopz">
                <view class="lpz">用户评价（{{data.evaluate_nums}}）</view>
                <view class="more" @click="$gTo(`/pages/shop/rate-list?id=${id}`)">查看更多 ></view>
            </view>
            <view class="opx_item" v-for="(item,index) in data.evaluates_list" :key="index" v-if="index < 2">
                <view class="zop">
                    <image :src="item.headimgurl" class="pic"></image>
                    <view class="name">{{item.nickname}}</view>
                </view>
                <view class="ioo">{{item.content}}</view>
                <view class="picx" v-if="item.pics && item.pics.length > 0">
                    <image class="pic" v-for="(el, ind) in item.pics" :key="ind" 
                        :src="el.attach_uri" @click="$previewImage(item.pics, ind)"></image>
                </view>
                <view class="times">{{item.create_time}}</view>
            </view>
        </template>
        
        <view class="ziuo">宝贝详情</view>
        <view class="miox">
            <u-parse :html="data.goods_detail"></u-parse>
        </view>
        
        <view class="footerx">
            <view class="footer_main">
                <view class="inx" @click="$sTo(`/pages/tabbar/index`)">
                    <image src="/static/icon/grx1.png" class="pic"></image>
                    <view class="ttt">首页</view>
                </view>
                <view class="inx" @click="KFshow = true">
                    <image src="/static/icon/grx2.png" class="pic"></image>
                    <view class="ttt">客服</view>
                </view>
                <view class="inx" @click="$sTo(`/pages/tabbar/cart`)">
                    <image src="/static/icon/grx3.png" class="pic"></image>
                    <view class="ttt">购物车</view>
                </view>

                <view class="add_cart" @click="buy">加入购物车</view>
                <view class="buy" @click="buy">立即购买</view>
            </view>
        </view>
        
        <!-- 选择数量、规格弹窗 -->
        <u-popup v-model="show" :round="true" mode="bottom" :closeable="true" width="750rpx" height="700rpx" border-radius="14">
            <view class="u-rela">
                <view class="store-box">
                    <view class="store-box-up">
                        <image class="img" mode="aspectFit" :src="data.image_uri"></image>
                        <view class="store-text">
                            <view class="u-font-30 text-bold u-line-2 u-p-t-10">{{data.goods_name}}</view>
                            <view class="price3">￥<text>{{ data.sale_price }}</text></view>
                        </view>
                    </view>
                    
                    <view v-if="data.quick_unit && data.quick_unit.length > 0">
                        <view class="o_tix u-p-t-20 u-p-b-20">便捷购买</view>
                        <scroll-view scroll-y="true" style="height: 130rpx;">
                            <view class="ortx">
                                <view class="cokn">
                                    <view class="con_item" v-for="(nItem, indexs) in data.quick_unit" :key="indexs" 
                                        :class="{ on: nItem.checked }" @click.stop="chooseSku(nItem)">
                                        {{ nItem.unit }}
                                    </view>
                                </view>
                            </view>
                        </scroll-view>
                    </view>
                    
                    <view class="numxd">
                        <view class="okx">购买数量</view>
                        <view>
							<u-number-box :disabled-input="false" input-width="150" v-model="numx" :min="1" :max="stock" @change="changeNum"></u-number-box>
							<!-- <text class="u-p-l-20">袋</text> -->
						</view>
                    </view>
                </view>
                <view class="store-btn-box" v-if="stockShow">
                    <view class="store-btn" @click.stop="toCar">加入购物车</view>
                    <view class="store-btn2" @click.stop="doBuy">立即购买</view>
                </view>
                <view class="store-btn-box" v-if="!stockShow">
                    <view class="store-btn-3">加入购物车</view>
                    <view class="store-btn2-3">立即购买</view>
                </view>
            </view>
        </u-popup>
        
        <u-mask :show="KFshow" mode="center" border-radius="15">
            <view class="popup">
                <view class="win-box2">
                    <view class="pop-up">
                        <view>平台客服</view>
                        <image src="../../static/image/service-icon.png" mode=""></image>
                    </view>
                    <view class="pop-call">
                        <view>
                            <view class="school">咨询热线</view>
                            <view class="u-font-34 text-bold">{{ data.shop_txt.phone }}</view>
                        </view>
                        <image src="../../static/image/g_kefu.png" @click="$call(data.shop_txt.phone)"></image>
                    </view>
                    <image src="../../static/icon/close.png" class="pop-del" @click="KFshow = false"></image>
                </view>
            </view>
        </u-mask>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                background: { backgroundColor: 'rgba(255,255,255,0)' },
                id: '', //商品id
                data: {}, //商品信息
                isShow: false,
                list: [], //轮播图
                show: false, //选择数量弹窗
                numx: 1, //选择数量
                stock: 0,//库存
                stockShow: true, //库存不足
                KFshow: false,
                service: {},//客服
            };
        },
        onShareAppMessage(res) {
        	return {
                title: this.data.goods_name,
                imageUrl: this.data.image_uri,
                path: '/pages/shop/goods?id=' + this.id
        	}
        },
        onLoad(option) {
            if(option.id) {
                this.id = option.id;
            }
            
            
        },
        onShow() {
			this.getData()
            // this.getService()
        },
        methods: {
			// 收藏
			doCollct() {
				if (!uni.getStorageSync('userToken')) {
				    this.$confirm('请先登录并且绑定手机号，是否去登录？',()=>{
				        uni.navigateTo({
				            url: "/pages/login/login"
				        })
				    })
				} else {
					this.$ajax('addCollection', {
						userToken: this.$getSync('userToken'),
					    data_id: this.id,
					    data_type: 'product',//product商品 calf牛源
					}).then(ret => {
						if (ret.status == 0) {
							this.data.is_collect = this.data.is_collect > 0 ? 0 : 1
						} else {
							this.$toast(ret.message);
						}
					});
				}
			    
			},
			
            //加入购物车、立即购买
            buy() {
                if (!uni.getStorageSync('userToken')) {
                    this.$confirm('请先登录并且绑定手机号，是否去登录？',()=>{
                        uni.navigateTo({
                            url: "/pages/login/login"
                        })
                    })
                } else if (!uni.getStorageSync('MOBILE')) {
                    this.$confirm('您还没有绑定手机号，是否去绑定？',()=>{
                        uni.navigateTo({
                            url: "/pages/login/login?show=1"
                        })
                    })
                } else {
                    if (this.data.is_sale == 0) {
                    	this.$toast('该商品已下架');
                    	return false;
                    } else {
                    	this.show = true;
                    }
                }
            },
            
            //立即购买
            doBuy() {
            	var goods = []
            	var obj = {
            		goods_id: this.id,//商品id
            		goods_sku_id: '',//规格id		
            		// goods_sku_name: '',//规格名称		
            		goods_nums: this.numx,//商品数量	
            	}
            	goods.push(obj)
                
            	this.$ajax('confirmOrder', {
            		userToken: this.$getSync('userToken'),
                    buyType: 1,
            		buy_id: '' , //购物车id 购物车提交必填
            		goods: goods, //[{"goods_id":1,"goods_sku_id":1,"goods_sku_name":'',"goods_nums":1}]
                    user_address_id: '',
                    supplier_id: this.data.supplier_id,
            	}).then(ret => {
            		if (ret.status == 0) {
                        this.show = false;
                        this.$gTo('/pages/settlement/settlement?data=' + JSON.stringify(ret.data))
            		} else {
            			this.$toast(ret.message)
            		}
            	})
            },
            
            //加入购物车
            toCar() {
                this.$ajax('buycar', {
                    userToken: this.$getSync('userToken'),
                    goods_id: this.id,//商品id		
                    goods_sku_id: '',//规格id		
                    goods_sku_name: '',//规格名称		
                    goods_nums: this.numx,//商品数量
                }).then(ret => {
                    if (ret.status == 0) {
                        this.$toast('加入成功');
                        setTimeout(()=> {
                        	this.show = false
                        	this.numx = 1
                        	this.data.quick_unit.forEach(ii => {
                        	    ii.checked = false
                        	})
                        }, 500)
                    } else {
                        this.$toast(ret.message);
                    }
                });
            },
                       
            // 选择数量
            changeNum(e) {
                // console.log('e',e)
                this.numx = e.value
                if (this.numx > this.stock) {
                    this.$toast('库存不足');
                    this.stockShow = false;
                } else {
                    this.stockShow = true;
                }
            },
            
            //选择便捷购买
            chooseSku(nItem) {
                const nowStatu = nItem.checked
                this.data.quick_unit.forEach(ii => {
                    ii.checked = false
                })
                nItem.checked =! nowStatu
                
                if (nItem.num > this.stock) {
                    this.$toast(`库存不足！仅剩${this.stock}件`);
                    return
                } else {
                    this.numx = nItem.num
                }
            },
            
            //获取商品详情
            getData() {
            	this.$ajax('goodsinfo', {
            		userToken: this.$getSync('userToken'),
            		goods_id: this.id, //商品id
            	}).then(ret => {
            		if (ret.status == 0) {
                        this.data = ret.data;
            			// 轮播图
            			if (ret.data.goods_album_detail.length > 0) {
            				ret.data.goods_album_detail.forEach((cur) => {
            					this.list.push({
            						image: cur.value
            					})
            				})
            			}
            			// 规格
                        this.stock = this.data.goods_stock //库存
                        
                        if (this.data && this.data.quick_unit && this.data.quick_unit.length > 0) {
                            this.data.quick_unit.forEach(cur => {
                                this.$set(cur, 'checked', false)
                            })
                        }
                        
            			this.isShow = true;
            		} else {
            			this.$toast(ret.message);
                        setTimeout(() => {
                            this.$backT()
                        }, 1000)
            		}
            	});
            },
            
            // 获取客服电话
            getService() {
            	this.$ajax('customerService', {
            		
            	}).then(ret => {
            		this.service = ret.data
            	});
            },
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
            	if (e.scrollTop == 0) {
            		this.background.backgroundColor = 'rgba(255,255,255,0)';
            	} else {
            		this.background.backgroundColor = 'rgba(255,255,255,' + a + ')';
            	}
            },
        }
    };
</script>

<style scoped lang="scss">
    // 客服弹窗
    .popup {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .win-box2 {
        width: 77vw;
        background-color: #ffffff;
        border-radius: 20upx;
        position: relative;
        background: #fff;
        border-radius: 10rpx;
        padding-bottom: 20rpx;
    }
    .pop-up {
        width: 77vw;
        height: 166upx;
        background: linear-gradient(to right, #01744d, #66cba9);
        color: #fff;
        border-top-left-radius: 10upx;
        border-top-right-radius: 10upx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding-left: 55upx;
        padding-right: 24upx;
        position: relative;
    }
    .school{
        font-size: 22rpx;
        padding-top: 5rpx;
    }
    .pop-up > view {
        font-size: 40upx;
        color: #ffffff;
    }
    .pop-up > image {
        font-size: 40upx;
        color: #ffffff;
        width: 290upx;
        height: 207upx;
        position: absolute;
        bottom: 0;
        right: 24upx;
    }
    .pop-call {
        width: 66vw;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding: 30upx 0;
        margin: 0 auto;
        font-weight: bold;
    
        image {
            width: 155rpx;
            height: 56rpx;
        }
    }
    .pop-del {
        width: 8vw;
        height: 8vw;
        position: absolute;
        left: 35vw;
        bottom: -100upx;
    }
    
    // 选择数量弹窗
    .price3{
        font-size: 30rpx;
        line-height: 38rpx;
        color: #f62a2a;
        font-weight: bold;
        padding-top: 40rpx;
            
        text {
        	font-size: 38rpx;
        	line-height: 38rpx;
        }
    }
    .store-box {
        padding: 10rpx 20rpx 30rpx;
        // height: 650rpx;
        overflow-y: auto;
    
        .store-box-up {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 20rpx;
            border-bottom: 2rpx solid #e6e6e6;
            padding-top: 20rpx;
        }
        .index-icon-30 {
            width: 33rpx;
            height: 33rpx;
        }
        .img {
            width: 210rpx;
            height: 210rpx;
            border: 2rpx solid #e6e6e6;
            border-radius: 15rpx;
        }
        .store-text {
            width: 64vw;
            // margin-right: 70rpx;
        }
    }
    .numxd {
        display: flex;
        justify-content: space-between;
        height: 50rpx;
        margin-top: 10rpx;
        .okx {
            font-size: 30rpx;
            line-height: 50rpx;
        }
    }
    .store-btn-box {
        background-color: #ffffff;
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .store-btn {
            margin: 10rpx 20rpx 30rpx 30rpx;
            padding: 25rpx 0;
            width: 45vw;
            background: #ff8a00;
            border-radius: 50rpx;
            font-size: 34rpx;
            text-align: center;
            color: #ffffff;
        }
        .store-btn2{
            margin: 10rpx 30rpx 30rpx 0;
            padding: 25rpx 0;
            width: 45vw;
            background: #00734c;
            border-radius: 50rpx;
            font-size: 34rpx;
            text-align: center;
            color: #ffffff;
        }
        
        .store-btn-3{
            margin: 10rpx 20rpx 30rpx 30rpx;
            padding: 25rpx 0;
            width: 45vw;
            background-color: #acacac;
            border-radius: 50rpx;
            font-size: 34rpx;
            text-align: center;
            color: #fff;
        }
        .store-btn2-3{
            margin: 10rpx 30rpx 30rpx 0;
            padding: 25rpx 0;
            width: 45vw;
            background-color: #acacac;
            border-radius: 50rpx;
            font-size: 34rpx;
            text-align: center;
            color: #fff;
        }
    }
    
    .ortx {
        width: 100%;
        .o_tix {
            width: 100%;
            height: 82rpx;
            line-height: 82rpx;
            font-size: 30rpx;
            color: #202020;
        }
        .cokn {
            display: flex;
            flex-wrap: wrap;
            margin-left: -20rpx;
            .con_item {
                font-size: 26rpx;
                padding: 15rpx 44rpx;
                background: #f4f4f4;
                border-radius: 10rpx;
                margin-left: 20rpx;
                margin-bottom: 16rpx;
                color: #8c8c8c;
                
                &.on {
                    background: #fff;
                    color: #ff8a00;
                    border: 2rpx solid #ff8a00;
                    box-sizing: border-box;
                }
            }
        }
    }
    
    .topx {
        width: 100%;
        height: 750rpx;
        position: relative;
        margin-bottom: 40rpx;

        .bannerx {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 750rpx;
        }
    }

    .moneyzx {
        font-size: 36rpx;
        color: #f62a2a;
        padding: 0 20rpx;
        line-height: 72rpx;

        .nums {
            font-size: 50rpx;
            font-weight: 700;
        }
    }

    .goods_name {
        font-size: 32rpx;
        color: #040000;
        padding: 0 20rpx;
        line-height: 46rpx;
    }

    .okxo {
        display: flex;
        padding: 0 20rpx;
        align-items: center;
        height: 84rpx;
        justify-content: space-between;

        .lexd {
            font-size: 24rpx;
            color: #7d7d7d;
        }

        .collect {
            display: flex;
            align-items: center;

            ::v-deep {
                .u-icon {
                    margin-right: 8rpx;
                }
            }

            .clt {
                font-size: 26rpx;
                color: #f62a2a;
            }

            .nor {
                font-size: 26rpx;
                color: #a4a4a4;
            }
        }
    }

    .oopz {
        width: 710rpx;
        display: flex;
        justify-content: space-between;
        height: 110rpx;
        align-items: center;
        margin: 0 auto;

        .lpz {
            font-size: 32rpx;
            color: #000;

            .more {
                font-size: 26rpx;
                color: #a3a3a3;
            }
        }
    }

    .opx_item {
        width: 710rpx;
        margin: 0 auto 20rpx;

        .zop {
            display: flex;
            align-items: center;
            height: 76rpx;
            margin-bottom: 16rpx;

            .pic {
                width: 76rpx;
                height: 76rpx;
                border-radius: 50%;
                margin-right: 24rpx;
            }

            .name {
                font-size: 30rpx;
                color: #333;
            }
        }

        .ioo {
            font-size: 26rpx;
            margin-bottom: 20rpx;
            word-break: break-all;
            white-space: pre-line;
        }

        .picx {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center;
            
            .pic {
                width: 180rpx;
                height: 180rpx;
                border-radius: 16rpx;
                margin-right: 15rpx;
                margin-bottom: 15rpx;
            }
        }

        .times {
            font-size: 24rpx;
            line-height: 52rpx;
        }
    }

    .ziuo {
        text-align: center;
        line-height: 72rpx;
        position: relative;
        font-size: 24rpx;
        color: #5c5c5c;
        background: #f5f5f5;

        &:before {
            position: absolute;
            left: 222rpx;
            top: 36rpx;
            background: #e5e5e5;
            content: '';
            width: 86rpx;
            height: 2rpx;
        }

        &:after {
            position: absolute;
            right: 222rpx;
            top: 36rpx;
            background: #e5e5e5;
            content: '';
            width: 86rpx;
            height: 2rpx;
        }
    }

    .miox {
        width: 100%;
    }

    .footerx {
        width: 100%;
        height: calc(98rpx + constant(safe-area-inset-bottom));
        height: calc(98rpx + env(safe-area-inset-bottom));

        .footer_main {
            position: fixed;
            left: 0;
            bottom: 0;
            height: calc(98rpx + constant(safe-area-inset-bottom));
            height: calc(98rpx + env(safe-area-inset-bottom));
            width: 100%;
            background: #fff;
            display: flex;

            .inx {
                flex: 1;
                width: 0;
                padding-top: 20rpx;

                .pic {
                    width: 36rpx;
                    height: 36rpx;
                    display: block;
                    margin: 0 auto 10rpx;
                }

                .ttt {
                    font-size: 22rpx;
                    color: #696969;
                    text-align: center;
                }
            }

            .add_cart {
                width: 192rpx;
                height: 70rpx;
                border-radius: 100px;
                background: #ff8a00;
                color: #fff;
                font-size: 28rpx;
                text-align: center;
                line-height: 70rpx;
                margin-right: 10rpx;
                margin-top: 14rpx;
            }

            .buy {
                width: 192rpx;
                height: 70rpx;
                border-radius: 100px;
                background: #00734c;
                color: #fff;
                font-size: 28rpx;
                text-align: center;
                line-height: 70rpx;
                margin-right: 22rpx;
                margin-top: 14rpx;
            }
        }
    }
</style>